<template>
  <div class="mask-container">
    <div v-if="maskShow" class="mask">
      <div v-if="!hiddenCloseFn" class="mask-bg" @click="tabMaskShow" />
      <div v-else class="mask-bg hiddenCloseFn" />
      <div :style="mainStyle" class="mask-main">
        <div class="title">{{ title }} <i class="close-icon el-icon-close" @click="tabMaskShow"/> </div>
        <div class="mask-main-container">
          <slot />
        </div>
        <div v-if="hasBtn" class="btn-container">
          <!-- <div style="flex:1;"/> -->
          <el-button size="small" class="btn ok-btn-style" type="primary" @click.stop="handelOk">确定</el-button>
          <el-button size="small" class="btn cancel-btn-style" style="margin-left:10px;" type="default" plain @click.stop="tabMaskShow">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    progressing: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '标题'
    },
    mainStyle: {
      type: Object,
      default: null
    },
    hasBtn: {
      type: Boolean,
      default: true
    },
    hasClose: {
      type: Boolean,
      default: false
    },
    hiddenCloseFn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      maskShow: false
    };
  },
  created() {
  },
  methods: {
    tabMaskShow() {
      if (!this.progressing) {
        this.maskShow = !this.maskShow;
        this.$emit('handelCancel');
      } else {
        this.$message.warning('正在请求，请先取消请求');
      }
    },
    closeShow() {
      this.maskShow = false;
    },
    handelOk() {
      this.$emit('handelOk');
    }
  }
};
</script>
<style scoped lang="scss">
$MediumColor: #fd3264;
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 2001;
  &-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1999;
    background-color: rgba(0, 0, 0, .2);
  }
  &-main {
    position: absolute;
    z-index: 2000;
    background-color: #ffffff;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    // box-shadow: 0px 0px 6.4px 1.6px
    //   rgba(218, 218, 218, 0.49);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    padding: 16px 24px 32px 24px;
    .title {
      width: 100%;
      font-size: 16px;
      color: #333;
      font-weight: 500;
      color: #333333;
      position: relative;
      &::before {
        position: relative;
        content: '';
        width: 4px;
        height: 16px;
        display: inline-block;
        background-color: #406EFF;
        vertical-align: bottom;
        position: relative;
        top: -3px;
        margin-right: 8px;
      }
      .close-icon {
        position: absolute;
        right: 0px;
        top: 0;
        cursor: pointer;
        color: #ddd;
        font-size: 16px;
      }
    }
    .mask-main-container {
      // padding: 0 10px;
      flex: 1;
      overflow: hidden;
      & ::v-deep {
        .el-range-editor .el-range-input {
          height: 22px!important;
        }
      }
    }
    .btn-container {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      .btn {
        height: 32px;
        border-radius: 4px;
      }
      .ok-btn-style {
        width: 120px;
      }
    }
  }
}
</style>
